<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>@yield('title')</title>
  <link rel="stylesheet" href="/homes/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="/homes/bootstrap/css/bootstrap-theme.min.css">
  <script type="text/javascript" src="/homes/bootstrap/js/jquery.js"></script>
  <script type="text/javascript" src="/homes/bootstrap/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="/homes/bootstrap/js/holder.js"></script>
  <link rel="stylesheet" type="text/css" href="/homes/css/home.css">

  <style type="text/css">
  		ul{
  			position: relative;
  			overflow: hidden;
  			height: 100px;
  			width: 9000px;	
  			padding: 0;
  		}
  		ul li{
  			width: 150px;
  			height:100px;
  			float: left;
  			list-style-type: none;
  		}	
  		ul li:first-child{
  			background: yellow;
  			width:300px;
  		}
  		ul li:nth-child(2){
  			background: pink;
  			
  		}
  		ul li:nth-child(3){
  			background: orange;
  			
  		}
  		ul li:nth-child(4){
  			background: grey;
  			
  		}
  		ul li:nth-child(5){
  			background: #bba;
  			
  		}
  </style>
  @section('css')
  @show
</head>
<body>
    <!-- 左侧 -->
    <div>
    	<ul>
    		<li></li><li></li><li></li><li></li><li></li>
    	</ul>	
    </div>	
</body>

<script type="text/javascript">
	$('li').mouseover(function(e){
		$(this).animate({width:"300px"}).siblings().animate({width:"150px"});

	});


</script>
</html>